<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
	<link rel="stylesheet" href="/css/elementui/index.css">
	<link rel="stylesheet" href="/css/exam/css/style.css">
	<link rel="stylesheet" href="/iconfont/iconfont.css">
	<script src="/css/exam/js/vue.js"></script>
	<script src="/css/elementui/index.js"></script>
	<script src="/css/exam/js/axios.min.js"></script>
    <title>考试管理</title>
    <style type="text/css">
        .el-table th.el-table__cell>.cell {
            text-align: center !important;
        }

        ;
        /* .el-table td.el-table__cell div.idName{
      text-align: center !important;
    } */
    </style>
</head>

<body>
    <!-- 分类管理 -->
    <div id="app">
  <div  class="p-30">
		  <el-row>
					<span class="icon iconfont icon-arrow_back"></span> <a href="{{route('admin.examview.index')}}">返  回</a> | 试题分类
		  </el-row><br>
        <!-- add button -->

            <el-button type="primary" icon="el-icon-plus"><a href="{{ url('/admin/examview/addcidlist') }}" class="btn" style="text-decoration: none;color: aliceblue;">添&ensp;&ensp;加</a></el-button><br><br>

        <!-- Category List -->

            <el-table :header-cell-style="{ background: '#f1f2f9' }" :data="categoryData.slice((currentPage-1)*pageSize,currentPage*pageSize)" style="width: 100%" row-key="id" lazy :load="load" :tree-props="{child: 'child', hasChildren: 'hasChild'}">
                <el-table-column align="center" prop="id" label="ID" width="120">
                </el-table-column>
                <el-table-column prop="c_sort" label="升&ensp;&ensp;序" sortable width="120">
                </el-table-column>
                <el-table-column prop="c_name" label="分类名" show-overflow-tooltip>
                </el-table-column>
                <el-table-column label="操&ensp;&ensp;作" show-overflow-tooltip>
                    <template slot-scope="scope">						
						<el-button  size="mini"  type="primary"  @click="handleEdit(scope.row)">编&ensp;&ensp;辑</el-button>
						<el-button  size="mini"  type="danger" @click.native.prevent="deleteRow(scope.$index, scope.row)">删&ensp;&ensp;除</el-button>
                    </template>
                </el-table-column>
            </el-table>
    
        <!-- Pager -->
     
            <div class="block">
                <el-pagination style="text-align: center;" @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage" :page-sizes="[5,15,10,20]" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper" :total="categoryData.length">
                </el-pagination>
            </div>

    </div>
    </div>
</body>
<script>
    new Vue({
        el: '#app',
        data: function() {
            return {
                // arr: [],
                categoryData: [{
                    id: '',
                    c_fid: '',
                    c_sort: '',
                    c_name: '',
                    child: [{
                        c_fid: '',
                        c_sort: '',
                        c_name: '',
                    }],
                    hasChild: true,
                    token: localStorage.getItem('logintoken')
                }],
                currentPage: 1, // 当前页码
                total: '', // 总条数
                pageSize: 10 // 每页的数据条数
            }
        },
        created() {
            this.tableData()
        },
        updated() {
            //在数据更新的时候存进缓存

        },
        methods: {
            // 编辑按钮跳转
            handleEdit(row) {
                window.open("{{ route('admin.examview.cidlist') }}?id=" + row.id, '_self')
            },

            // handleEdit(row) {
            //     let that = this;
            //     this.$route.push({
            //         path: 'admin.examview.cidlist',
            //         query: {
            //             id: row.id,
            //             c_sort: this.categoryData.c_sort,
            //             c_name: this.categoryData.c_name
            //         }
            //     })
            //     console.log('--------------------->',this.$route);
            // },
            // 删除按钮
            deleteRow(index, rows) {
                this.$confirm('确认操作?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.$message({
                        type: 'success',
                        message: '删除成功!'
                    });
                    axios.post('/admin/exam/category_del', {
                            id: rows.id
                        })
                        .then(res => {
                            this.tableData()
                        })
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });

            },
            load(tree, treeNode, resolve) {
                setTimeout(() => {
                    resolve([{
                        c_fid: '',
                        c_sort: '',
                        c_name: ''
                    }])
                }, 1000)
            },
            tableData() {
                axios.post('/admin/exam/category_index', {})
                    .then(res => {
                        console.log('请求成功：', res.data.data);
                        this.categoryData = res.data.data;
                        // console.log(res.data.data);
                        // console.log(this.categoryData);
                    }).catch(error => {
                        console.log('请求失败：' + error);
                    })
            },
            goBack() {
                window.history.go(-1)
                console.log('go back');
            },
            // 分页器功能
            //每页条数改变时触发 选择一页显示多少行
            handleSizeChange(val) {
                console.log(`每页 ${val} 条`);
                this.currentPage = 1;
                this.pageSize = val;

            },
            //当前页改变时触发 跳转其他页
            handleCurrentChange(val) {
                console.log(`当前页: ${val}`);
                this.currentPage = val;
            }
        }
    })
</script>
<style>
  .el-table .el-table__cell:first-child{text-align: center;}
   a{color:#409EFF;text-decoration: none;}
</style>
</html>